<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../src/modular/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        #container,.box-card{
            width: 250px;
            height: 250px;
            border: 1px solid #ccc;
            background-color: #ee5522;
            background-color: #ee5522;
            background-color: #ee5522;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23d23d09' fill-opacity='0.3'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.3'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
        }
        @font-face {
            font-family: 'Roboto';
            src: url("../../../src/modular/SourceHanSansSC-Medium.otf") format('opentype');
        }
        *{
            font-family: 'Roboto';
        }

        .info{
            height: 100px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            font: 1.5em sans-serif;
            /* 字体阴影 */
            text-shadow: 0 0 10px rgb(0, 0, 0);
        }
        
    </style>
</head>
<body>
    <div id="container">
        <el-card class="box-card">
            
            <div style="display:flex ;justify-content: center">
                <el-avatar
                  src="{{Avatar}}"
                  :size="100"
                  />
              </div>
              <div class="info">
                <span>{{title}}</span>
                <span>{{content}}</span>
              </div>
            
        </el-card>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
          setup(){
            return {}
          }
        }).use(ElementPlus).mount('#container')
      </script>
</body>
</html>